<div *ngIf="!progressData">
  <div class="modal-header">
    <h4 class="modal-title pull-left">Create Stream</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <form name="form-creation" (submit)="submit()" class="form-horizontal" [formGroup]="form">
    <div class="modal-body" *ngIf="!progressData">
      <div *ngIf="errors && errors.length > 0" class="alert alert-error">
        <div *ngFor="let error of errors">• {{ error }}</div>
      </div>
      <p>This action will create the following <strong>stream(s)</strong>:</p>
      <div *ngFor="let def of streamDefsToCreate()" class="row-stream">
        <div class="form-group">
          <label class="control-label col-sm-4">Definition</label>
          <div class="col-sm-18">
            <div class="control-empty">
              <app-stream-dsl>{{ def.def }}</app-stream-dsl>
            </div>
          </div>
        </div>
        <div class="form-group" [class.has-error]="getControl(def.index.toString()).invalid || hasDuplicateName(def)">
          <label [for]="def.index.toString()" class="control-label col-sm-4 control-label-sm">
            Name <em class="required">*</em>
          </label>
          <div class="col-sm-16">
            <input [disabled]="isStreamCreationInProgress()" class="form-control input-sm" [id]="def.index.toString()"
                   [name]="def.index.toString()" [formControlName]="def.index.toString()"
                   type="text" placeholder="<Stream Name>" [ngModel]="def.name"
                   (ngModelChange)="changeStreamName(def.index, $event)"/>
            <span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.required"
                  class="help-block validation-block">
            Stream name is required!
          </span>
            <span
              *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.uniqueResource"
              class="help-block validation-block">
            Stream name is already taken!
          </span>
            <span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.pattern"
                  class="help-block validation-block">
            Invalid stream name!
          </span>
            <span *ngIf="hasDuplicateName(def)" class="help-block validation-block">
            Duplicate stream name on the form
          </span>
          </div>
        </div>
      </div>
      <div class="row row-stream-deploy" *ngIf="isDeployEnabled">
        <div class="col-sm-offset-4 col-sm-18">
          <label class="checkbox-inline">
            <input [disabled]="isStreamCreationInProgress()" type="checkbox" [(ngModel)]="deploy"
                   [ngModelOptions]="{standalone: true}"/>
            Deploy stream(s)
          </label>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
      <button type="submit" class="btn btn-default" [disabled]="!canSubmit()">
        <span *ngIf="streamDefsToCreate().length === 1">
          <span *ngIf="deploy">Create and deploy the stream</span>
          <span *ngIf="!deploy">Create the stream</span>
        </span>
        <span *ngIf="streamDefsToCreate().length > 1">
          <span *ngIf="deploy">Create and deploy the {{ streamDefsToCreate().length }} streams</span>
          <span *ngIf="!deploy">Create the {{ streamDefsToCreate().length }} streams</span>
        </span>
      </button>
    </div>
  </form>
</div>

<div *ngIf="progressData">
  <div class="modal-header">
    <h4 class="modal-title pull-left">Creating...</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" *ngIf="progressData">
    <div><strong>Creating Streams...</strong></div>
    <progressbar animate="true" [value]="progressData.percent" type="success"><b>{{ progressData.percent }}%</b>
    </progressbar>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="cancel()">Close</button>
  </div>
</div>
